<template>
  <van-sticky>
  <van-nav-bar  title="商家信息" left-text="返回" left-arrow @click-left="onClickLeft">
  </van-nav-bar>
  </van-sticky>
<!--  动态加载-->
  <OpLoading :loading="pending" type="skeleton">
    <div class="Shop-top">
      <div class="Shop-desc">
        <!-- 头部栏  存放商家名称 图片  -->
        <div class="upItem">
          <div class="Item-left">
            <div style="display: flex;font-size: 5vw; font-weight: bolder">{{businessInfo.businessName}}</div>
            <div style="display: flex;font-size:3.5vw">4.8分 蜂鸟准时达 约26分钟  -  月售1000+</div>
          </div>
          <div class="Item-right w-10 h-10 ml-4 flex-shrink-0 overflow-hidden">
            <van-image

                :src="businessInfo.businessImg"
            />
          </div>
        </div>
        <!-- 信息栏  存放折扣信息 -->
        <div class="downItem">
          <div style="color: gray;font-size:3.5vw ">
            <van-text-ellipsis :content="adText" expand-text="展开" collapse-text="收起" />
          </div>
          <div class="Shop-account">最高28 购</div>
          <div class="Shop-account2">
            <div class="accountItem" v-for="v in AccountTags" :key="v">
              {{v}}
            </div>
            <div class="accountItem" key="arrow" @click="toggleAccountTag">
              <VanIcon v-if="isAccountTagShown" name="arrow-up"></VanIcon>
              <VanIcon v-else name="arrow-down"></VanIcon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 点餐导航栏-->
    <VanTabs sticky shrink offset-top="46px"
             :color="'rgb(223, 35, 27)'"
             :background="tabBackgroundColor"
             @scroll="onTabScroll">
      <VanTab v-for="v in SHOP_TAB" :key="v.value" :title="v.title">
        <component :is="v.component" :data="businessId"></component>
      </VanTab>
    </VanTabs>
  </OpLoading>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import OpLoading from "@/components/OpLoading.vue";
import {reqFoodInfo} from "../../api/shop";
import type {FoodInfo} from "@/api/shop/type.ts";
import {useToggle} from "@/use/useToggle.ts";
import {reqBusInfoById} from "@/api/home";
import type {BusinessInfo} from "@/api/home/type.ts";
import {RECOM_TAB, SHOP_TAB} from "@/views/Tabber/home/config.ts";

const route = useRoute();
// 商家编号
const {id} = route.params;
// 将字符串类型的 id 转换为 number 类型
const businessId = Number(id);
//导航栏颜色
const tabBackgroundColor=ref('transparent');
const pending=ref(true);
// 存储前端数据
const FoodList:any=ref<FoodInfo>([]);
const businessInfo=ref<BusinessInfo>();
// const name=ref<string>(businessInfo.businessName);
const adText="公告：欢迎光临本店！在这里，我们用心准备每一道佳肴，期待为您带来难忘的美食体验。我们承诺提供新鲜食材、优质服务和舒适的用餐环境。"
const ACCOUNT_TAGS=[
    '34减1',
    '58减2',
    '89减3',
    '特价商品',
    '集点返',
    '配送费立减4元',
    '特价商品3.9元起'
]
const [isAccountTagShown, toggleAccountTag] = useToggle(false);
const AccountTags = computed(() =>
    isAccountTagShown.value ? ACCOUNT_TAGS : ACCOUNT_TAGS.slice(0, 4)
)
//粘性布局
const onTabScroll = ({ isFixed }: { isFixed: boolean }) => {
  tabBackgroundColor.value = isFixed ? 'white' : 'transparent'
}
//根据路径携带的id号进行查询
const getFoodInfo=async()=>{
  let result=await reqFoodInfo(businessId);
  if(result.code==1){
    FoodList.value=result.data;
    //取消加载效果
    pending.value=false;
  }
};
//根据商家编号查询商家信息
const getBusinessInfo=async()=>{
  let result=await reqBusInfoById(businessId);
  if(result.code==1){
    businessInfo.value=result.data;
  }
}
onMounted(()=>{
  getFoodInfo();
  getBusinessInfo();
})
const onClickLeft = () => history.back()
</script>

<style scoped>
.Shop-top{
  display:flex;
  width:100%;
  flex-direction: column;
  align-items: center;
}
.Shop-top .Shop-desc{
  display:flex;
  border:1px solid gray;
  flex-direction: column;
  justify-content: center;
  width:90%;
  border-radius: 15px;
  box-shadow: 2px 2px 4px rgb(50, 161, 210);
}
.Shop-top .Shop-desc .upItem{
  display:flex;
  flex-direction: row;
  margin:0 2vw;
}
.Shop-top .Shop-desc .upItem .Item-left{
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  flex:8;
}
.Shop-top .Shop-desc .upItem .Item-right{
  display:flex;
  flex:2;
}
.Shop-top .Shop-desc .downItem{
  display:flex;
  flex-direction:column;
  margin:0 2vw;
}
.Shop-top .Shop-desc .downItem .Shop-account2{
  display:flex;
  flex-wrap: wrap;
}
.Shop-top .Shop-desc .downItem .Shop-account2 .accountItem{
  display: inline-block;
  font-size: 12px;
  border-radius: 10px;
  color: rgb(205, 99, 85);
  background: var(--van-gray-1);
  padding: 4px 8px;
  margin-right: 10px;
  margin-bottom: var(--van-padding-xs);
}
.custom-image {
  width: 100px !important;   /* 控制宽度 */
  height: 100px !important;  /* 控制高度 */
  object-fit: cover;         /* 保持图片比例 */
  flex-shrink: 0;            /* 防止在flex布局中收缩 */

}
</style>